@import './variables.less';
@import '../../style/mixins.less';

.fnx-checkbox {
	display: flex;
	align-items: center;
	overflow: hidden;
	cursor: pointer;
	user-select: none;

	&--disabled {
		cursor: not-allowed;
	}

	&--label-disabled {
		cursor: default;
	}

	&--horizontal {
		margin-right: var(--fnx-checkbox-horizontal-margin-right);
	}

	&__icon {
		flex: none;
		font-size: var(--fnx-checkbox-size);
		cursor: pointer;

		&--square,
		&--round {
			width: 1.25em;
			height: 1.25em;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid var(--fnx-checkbox-border-color);
			transition-duration: var(--fnx-checkbox-transition-duration);
			transition-property: border-color, background-color;
			box-sizing: border-box;

			.fnx-icon {
				color: transparent;
				transition-duration: var(--fnx-checkbox-transition-duration);
				transition-property: color;
			}

			&.fnx-checkbox__icon--checked {
				background-color: var(--fnx-checkbox-checked-icon-color);
				border-color: var(--fnx-checkbox-checked-icon-color);

				.fnx-icon {
					color: var(--fnx-checkbox-icon-color);
				}
			}

			&.fnx-checkbox__icon--disabled {
				cursor: not-allowed;
				background-color: var(--fnx-checkbox-disabled-background-color);
				border-color: var(--fnx-checkbox-disabled-icon-color);

				&.fnx-checkbox__icon--checked .fnx-icon {
					color: var(--fnx-checkbox-disabled-icon-color);
				}
			}
		}

		&--round {
			border-radius: 100%;
		}
	}

	&__icon + &__label,
	&__label + &__icon {
		margin-left: var(--fnx-checkbox-label-margin);
	}

	&__label {
		color: var(--fnx-checkbox-label-color);
		line-height: var(--fnx-checkbox-size);

		&--left {
			margin: 0 var(--fnx-checkbox-label-margin) 0 0;
		}

		&--disabled {
			color: var(--fnx-checkbox-disabled-label-color);
		}
	}
}

.fnx-checkbox-group {
	&--horizontal {
		display: flex;
		flex-wrap: wrap;
	}
}
